<template>
    <div class="_switch-button" @click="doSwitch()" :class="{ active: value }" :disabled="disabled"></div>
</template>

<script>
import { toRefs } from 'vue'
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    setup (props, { emit }) {
        const { value, disabled } = toRefs(props)
        const doSwitch = () => {
            if (!disabled.value) {
                const val = !value.value
                emit('update:value', val)
                emit('change', val)
            }
        }
        return { doSwitch }
    }
}
</script>

<style lang="scss">
    @use './style.scss';
</style>
